<template>
	<el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">
		<el-descriptions-item width="50%" :label='titles.unityName'>
			{{ isNullOrEmpty(formInline?.unityName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.projectName'>
			{{ isNullOrEmpty(formInline?.projectName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.gatewayName'>
			{{ isNullOrEmpty(formInline?.gatewayName) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.gatewaySN'>
			{{ isNullOrEmpty(formInline?.gatewaySN) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" label='流量卡号'>
			{{ isNullOrEmpty(formInline?.flowCardNum) }}
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.rate'>
			{{ isNullOrEmpty(formInline?.rate) }} 秒
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.commStatus'>
			<el-tag :type="COMMSTATUSTEXT[formInline?.commStatus]?.type">
				{{ isNullOrEmpty(COMMSTATUSTEXT[formInline?.commStatus]?.label) }}	
			</el-tag>
			
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.status'>
			<el-tag :type="STRATEGYSTATUSTEXT[formInline?.status]?.type">
				{{ isNullOrEmpty(STRATEGYSTATUSTEXT[formInline?.status]?.label) }}
			</el-tag>
			
		</el-descriptions-item>
		<el-descriptions-item width="50%" :label='titles.deviceNum'>
			{{ isNullOrEmpty(formInline?.deviceNum) }}
		</el-descriptions-item>
	</el-descriptions>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
import { COMMSTATUS, COMMSTATUSTEXT, STRATEGYSTATUSTEXT } from "@/constant/device-mangenment";
import { ref } from "vue";
import { titles } from './index';
import type { infoType } from '@/api/operate/gateway-administration/index';
type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});

const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
